<script lang="ts">
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    export let hidden = false;
    export let title = "";
    export let confirmButtonText = ""
    export let triggerCancelEvent = false;
    export let triggerConfirmEvent = false;
    export let asForm = true;
    export let width = "100%";

    $: cssText = `width:${width}`;
    function _closeModal () {
        hidden = true;
    }
    function cancelModal () {
        _closeModal();
        dispatch('modal-cancel');
    }
    function confirmModal () {
        dispatch('modal-confirm');
    }
    $: {
        if (triggerCancelEvent) {
            cancelModal();
        }
        if (triggerConfirmEvent) {
            confirmModal();
        }
    }
</script>
<div class:hidden class="w-full h-screen flex justify-center items-start top-0 z-50 left-0 fixed overflow-hidden">
  <div class="relative p-4 mt-32" class:max-w-md={asForm} style="{cssText}">
      <!-- Modal content -->
      <div class="relative rounded-lg shadow bar-bg-light bar-border">
          <div class="flex justify-end p-2">
              <button type="button" on:click={cancelModal} class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
              </button>
          </div>
          <div class="px-8 pb-8 space-y-4">
            <h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
            <slot />
            <button class="modal-confirm-button w-full" on:click={confirmModal} >{confirmButtonText}</button>
        </div>
      </div>
  </div>
</div>